﻿<template>
	<div>
		<table style="width: 100%;height: 600px;">
			<tr>
				<td style="width: 50%;height: 50%;background-color: aqua;" @click="data1.showtimes++">
					点击显示菜单
				</td>
				<td style="width: 30%;background-color: rgb(43, 226, 89);" @contextmenu="SPContextmenu.show('demo1')">
					右键显示菜单
				</td>
			</tr>
			<tr>
				<td style="height: 30%;background-color: beige;" @contextmenu="SPContextmenu.show('demo1')">
					右键显示菜单
				</td>
				<td style="background-color: cadetblue;" @click="ev=>open(ev)">
					点击显示菜单
					<div @contextmenu="ev=>open(ev)" style="background-color: aqua;">右键打开少一点的那个菜单</div>
				</td>
			</tr>
			<tr>
				<td style="height: 30%;background-color: rgb(110, 219, 59);"
					@contextmenu="SPContextmenu.show('newmenu1')">
					<button @click="showDyMenu1">动态显示菜单1</button>
					<button @click="showDyMenu2">动态显示菜单2</button>
					<button @click="showDyMenu3">动态显示菜单3</button>
				</td>
				<td style="background-color: rgb(211, 236, 236);">
				</td>
			</tr>
		</table>

		<sp-contextmenu :pobj="data1"></sp-contextmenu>

		<sp-contextmenu :pobj="data2"></sp-contextmenu>
	</div>
</template>
<script>
	var menupobj = {
		showtimes: 0,
		menulist: [
			{
				icoName: "fa fa-android",
				fnHandler: function (arg) {
					console.info(arg);
				},
				btnName: "选项1-1-1"
			}
		]
	};


	module.exports = {
		name: 'mymenu',
		methods: {
			open(ev) {
				if (ev.target.tagName === 'TD') {
					SPContextmenu.show('demo1');
					return;
				}
				if (ev.target.tagName === 'DIV') {
					SPContextmenu.show('demo2');
					return;
				}
			},

			showDyMenu1() {
				SPContextmenu.show('newmenu1', this.data3);
			},
			showDyMenu2() {
				this.$set(this.dymenudata, 0, menupobj);// 才能监听

				SPContextmenu.show('newmenu2', this.dymenudata[0]);
			},
			showDyMenu3() {
				this.$set(this.dymenudata, 0, {
					showtimes: 0,
					menulist: [
						{
							icoName: "fa fa-android",
							fnHandler: function (arg) {
								console.info(arg);
							},
							btnName: "动态菜单3选项1-1-1"
						}
					]
				});// 才能监听

				SPContextmenu.show('newmenu3', this.dymenudata[0]);
			}
		},
		data() {
			return {
				index: 0,
				dymenudata: [],
				data1: {
					name: 'demo1',
					showtimes: 0,
					menulist: [
						{
							btnName: "选项1111111",
							icoName: "fa fa-home fa-fw",
							menulist: [
								{
									icoName: "404",
									btnName: "选项1-1",
									menulist: [
										{
											icoName: "el-icon-apple",
											menulist: [
												{
													icoName: "fa fa-file",
													fnHandler: function (arg) {
														console.info(arg);
													},
													btnName: "选项1-1-1"
												},
												{
													icoName: "",
													fnHandler: function (arg) {
														console.info(arg);
													},
													btnName: "选项1-1-2"
												},
												{
													icoName: "fa fa-android",
													fnHandler: function (arg) {
														console.info(arg);
													},
													btnName: "选项1-1-3",
													menulist: [
														{
															icoName: "fa fa-android",
															fnHandler: function (arg) {
																console.info(Vue);
															},
															btnName: "选项1-1-3-1"
														},
														{
															icoName: "fa fa-android",
															fnHandler: function (arg) {
																console.info(arg);
															},
															btnName: "选项1-1-3-2"
														},
														{
															icoName: "fa fa-android",
															fnHandler: function (arg) {
																console.info(arg);
															},
															btnName: "选项1-1-3-3"
														},
														{
															icoName: "fa fa-android",
															fnHandler: function (arg) {
																console.info(arg);
															},
															btnName: "选项1-1-3-4"
														},
														{
															icoName: "fa fa-android",
															fnHandler: function (arg) {
																console.info(arg);
															},
															btnName: "选项1-1-3-5"
														},
														{
															icoName: "fa fa-android",
															fnHandler: function (arg) {
																console.info(arg);
															},
															btnName: "选项1-1-3-6"
														},
														{
															icoName: "fa fa-android",
															fnHandler: function (arg) {
																console.info(arg);
															},
															btnName: "选项1-1-3-7"
														}
													]
												}
											],
											btnName: "选项1-1-1"
										}
									]
								}
							]
						},
						{
							btnName: "选项2",
							menulist: [
								{
									fnHandler: function (arg) {
										console.info(arg);
									},
									btnName: "选项2-1"
								}
							]
						},
						{
							btnName: "选项3",
							fnHandler: function (arg) {
								console.info(arg);
							},
						},
						{
							btnName: "选项4",
							disabled: true
						}
					]
				},
				data2: {
					name: 'demo2',
					showtimes: 0,
					menulist: [
						{
							btnName: "选项1",
							icoName: "fa fa-home fa-fw",
							menulist: [
								{
									icoName: "fa fa-adn",
									btnName: "选项1-1",
									menulist: [
										{
											icoName: "fa fa-file",
											menulist: [
												{
													icoName: "fa fa-android",
													fnHandler: function (arg) {
														console.info(arg);
													},
													btnName: "选项1-1-1",
													disabled: false
												}
											],
											btnName: "选项1-1-1",
										}
									]
								}
							]
						}
					]
				}, data3: {
					showtimes: 0,
					menulist: [
						{
							btnName: "动态菜单选项1",
							icoName: "fa fa-home fa-fw",
							menulist: [
								{
									icoName: "fa fa-adn",
									btnName: "选项1-1",
									menulist: [
										{
											icoName: "fa fa-file",
											menulist: [
												{
													icoName: "fa fa-android",
													fnHandler: function (arg) {
														console.info(arg);
													},
													btnName: "选项1-1-1",
													disabled: false
												}
											],
											btnName: "选项1-1-1",
										}
									]
								}
							]
						}
					]
				}

			}
		}
	};

</script>